<template>
  <div>
    <w-section title="AES">
      <el-button
        size="mini"
        type="primary"
        @click="popBtnClick('encode')">加 密</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="popBtnClick('decode')">解 密</el-button>
    </w-section>

    <!--提示框-->
    <el-dialog
      :title="form.type == 'encode' ? '加密' : '解密'"
      :visible.sync="isShow"
      width="800px">
      <el-form
        ref="form"
        :model="form"
        label-width="60px">
        <el-form-item label="Input">
          <el-input
            v-model="form.value"
            type="textarea"/>
        </el-form-item>
        <el-form-item
          v-if="form"
          label="Key">
          <el-input
            v-model="form.key"
            type="textarea"/>
        </el-form-item>
        <el-form-item
          v-if="form.data"
          label="Data">
          <el-card
            :body-style="{ padding: '0px 15px' }"
            class="box-card">
            <span class="text-warp">{{ form.data }}</span>
          </el-card>
        </el-form-item>
        <el-form-item>
          <el-button
            :disabled="!form.key || !form.value"
            class="float-right"
            style="margin-left: 20px"
            size="mini"
            type="primary"
            @click="okBtnClick">确 定</el-button>
          <el-button
            size="mini"
            class="float-right"
            @click="isShow = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import WSection from '../../components/section'
import API from '@/api/apis'
import { post } from '@/api/ajax'
export default {
  name: 'WebToolCryptoAes',
  components: {
    WSection
  },
  data() {
    return {
      isShow: false,
      form: {
        type: '',
        key: '',
        value: '',
        data: ''
      },
      title: ''
    }
  },
  methods: {
    popBtnClick(type) {
      this.form.key = ''
      this.form.value = ''
      this.form.data = ''
      this.form.type = type
      this.isShow = true
    },
    okBtnClick() {
      post(API.coding.aes, {
        key: this.form.key,
        type: this.form.type,
        input: this.form.value
      }).then((data) => {
        this.form.data = data
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>

</style>
